<template>
  <div class="abc" :class="{ active: isActive }">中华人民共和国</div>
  <div :class="classObject">classObject</div>
  <div :class="classObject1">计算属性获取类名</div>
  <div :class="[activeClass, errorClass]">类绑定数组</div>
  <img :src="imgSrc" alt="">
</template>
<script lang="ts" setup>
import imgSrc from '@/img/组件赋值类名.png'
import { ref, reactive, computed } from 'vue'
const isActive = ref(true)

const classObject = reactive({
  active: true,
  'text-danger': true
})

const error = ref({ type: 'fatal' })

const classObject1 = computed(() => ({
  active: isActive.value && !error.value,
  'text-danger': error.value && error.value.type === 'fatal'
}))

const activeClass = ref('active')
const errorClass = ref('text-danger')
</script>
